<template>
  <PageLayout class="form-container">
    <div class="form-title">修改密码</div>
    <div class="form-box w-800">
      <a-form
        :model="formState"
        :rules="rules"
        ref="formRef"
        layout="Vertical"
        :labelCol="{ style: { width: '130px' } }"
      >
        <a-form-item label="原密码" name="password" required>
          <a-input-password
            v-model:value="formState.password"
            placeholder="请输入"
            :maxlength="50"
          />
        </a-form-item>
        <a-form-item label="新密码" name="newPassword" required>
          <a-input-password
            v-model:value="formState.newPassword"
            placeholder="请输入"
            :maxlength="50"
          />
        </a-form-item>
        <a-form-item label="确认新密码" name="comfirmPassword" required>
          <a-input-password
            v-model:value="formState.comfirmPassword"
            placeholder="请输入"
            :maxlength="50"
          />
        </a-form-item>

        <a-col :span="24">
          <a-form-item class="btn-box" style="margin-left: 130px">
            <a-button @click="router.go(-1)">返回</a-button>
            <a-button type="primary" @click="save">保存</a-button>
          </a-form-item>
        </a-col>
      </a-form>
    </div>
  </PageLayout>
</template>

<script setup>
import {
  postUserUpdate,
} from "@/api/system";
import { message } from "ant-design-vue";
const router = useRouter();
const formRef = ref(null);

const formState = reactive({
  id: "",
  password: "",
  newPassword: "",
  comfirmPassword: "",
});
const rules = {
  password: [{ required: true, message: "请输入原密码", trigger: "blur" }],
  newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  comfirmPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
  ],
};

const save = () => {
  formRef.value.validate().then(() => {
    postUserUpdate({ ...formState }).then(() => {
      message.success("修改成功");
    });
  });
};
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 24px;
  margin-left: 130px;
  :deep(.ant-btn) {
    margin-right: 16px;
  }
}
</style>
